<template>
    <div class="category">
        <!-- <h1>商品详情页面</h1> -->
        <div class="search">
            <van-search v-model="value" shape="round" placeholder="请输入搜索关键词" @search="onSearch" />
        </div>

        <!-- 内容盒子 -->
        <div class="box">
            <!-- 侧边导航 -->
            <van-sidebar v-model="activeKey" class="left">
                <van-sidebar-item
                    :class="{ active: index == activeKey }"
                    v-for="(item, index) in categoryList"
                    @click="changeRed(index)"
                    class="category-item"
                    :key="item.id"
                    :title="item.cate_name"
                />
            </van-sidebar>

            <div class="right" ref="right">
                <div v-for="item in categoryList" :key="item.id" ref="rightBox" class="rightBox">
                    <h3>{{ item.cate_name }}</h3>
                    <ul>
                        <router-link tag="li" :to="`/categoryson/${n.id}/${n.cate_name}`" v-for="n in item.children" :key="n.id">
                            <!-- <img :src="n.pic" alt="" /> -->
                            <!-- 图片懒加载,且图片显示不出来的时候使用默认图片  -->
                            <van-image class="img" lazy-load :src="n.pic" alt="">
                                <template v-slot:error>
                                    <img src="../assets/image/noGood.png" alt="" />
                                </template>
                            </van-image>

                            <span>{{ n.cate_name }}</span>
                        </router-link>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            value: "",
            activeKey: 0,
            categoryList: [], // 记录数据
            tightTop: [], // 记录每一个列表距离顶部的距离
        };
    },
    methods: {
        // 获取商品数据
        async getCategoryList() {
            await this.axios.get("/category").then((re) => {
                this.categoryList = re;
            });
        },

        // 搜索功能
        onSearch() {
            if (this.value == "" || this.value.length == 0) return;
            this.$router.push(`/categoryson/${0}/${this.value}`);
        },

        // 实现商品滚动功能
        rolling() {
            // 页面滚动的距离
            let scroll = document.scrollTop || document.documentElement.scrollTop;
            if (scroll) {
                let arr = this.$refs.rightBox;
                arr.forEach((item, index) => {
                    // 记录距离顶部的距离
                    this.tightTop.push(item.offsetTop);

                    // 改变左侧导航栏的高亮
                    if (scroll + 70 >= item.offsetTop) {
                        this.activeKey = index;
                    }
                });
            }
        },

        // 商品点击滚动
        changeRed(index) {
            let arr = this.$refs.rightBox;
            arr.forEach((item) => {
                // 记录距离顶部的距离
                this.tightTop.push(item.offsetTop);
            });
            this.activeKey = index + 1;
            // 滚动的距离
            let scrollY = this.tightTop[index];
            let scroll = document.scrollTop || document.documentElement.scrollTop;
            if (scroll > this.tightTop[this.tightTop.length - 1]) return;
            window.scrollTo(0, scrollY - 65);
        },
    },
    mounted() {
        // 页面滚动,获取滚动函数
        window.addEventListener("scroll", this.rolling);
    },
    created() {
        // 初始化数据
        this.getCategoryList();
    },
    // 页面销毁
    beforeDestroy() {
        window.removeEventListener("scroll", this.rolling);
    },
    // 页面离开
    beforeRouteLeave(to, form, next) {
        window.removeEventListener("scroll", this.rolling);
        next();
    },
};
</script>

<style lang="scss" scoped>
.category {
    margin-bottom: 50px;
    .search {
        // border: 1px solid red;
        border-bottom: 1px solid rgba(210, 199, 199, 0.3);
        position: fixed;
        top: 0;
        background: #fff;
        z-index: 99;
        width: 100vw;
        height: 48px;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        ::v-deep .van-search {
            padding: 0;
            width: 95vw;
        }
    }
    // 内容盒子
    .box {
        display: flex;
        // 左侧盒子
        .left {
            width: 90px;
            overflow: hidden;
            background: #f7f7f7;
            position: fixed;
            left: 0;
            top: 50px;
        }
        .category-item {
            width: 90px !important;
            height: 40px !important;
            line-height: 0px !important;
            border: none;
            &.active {
                color: red;
            }
        }

        // 右侧盒子
        .right {
            flex: 1;
            margin-left: 80px;
            margin-top: 50px;
            div {
                margin: 20px 0 10px 0;
                h3 {
                    font-size: 18px;
                    text-align: center;
                    // font-weight: 500;
                    position: relative;
                    &::before {
                        content: "";
                        width: 50px;
                        height: 1px;
                        background: rgba(85, 83, 83, 0.7);
                        position: absolute;
                        left: 17%;
                        top: 50%;
                    }
                    &::after {
                        content: "";
                        position: absolute;
                        top: 50%;
                        right: 17%;
                        width: 50px;
                        height: 1px;
                        background: rgba(85, 83, 83, 0.7);
                    }
                }
                // 图片文字部分
                ul {
                    display: flex;
                    justify-content: space-around;
                    flex-wrap: wrap;
                    margin: 10px;
                    li {
                        width: 30%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        flex-direction: column;
                        .img {
                            width: 60px;
                            height: 60px;
                            margin-top: 10px;
                        }
                        span {
                            font-size: 12px;
                            margin-top: 8px;
                        }
                    }
                }
            }
        }
    }
}
</style>
